GermanWikipedia - /page/entry.mu

Micron Document

`:top

`!Model View ViewModel`! (`!MVVM`!) ist ein `F33f`_`[Entwurfsmuster`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Entwurfsmuster]`_`f und eine Variante des `F33f`_`[Model-View-Controller`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Model_View_Controller]`_`f-Musters (MVC). Es dient zur Trennung zwischen Darstellung und Logik der `F33f`_`[Benutzerschnittstelle`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Benutzerschnittstelle]`_`f (UI) und des `F33f`_`[Software-Backends`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Frontend_und_Backend]`_`f. Das Entwurfsmuster ist die Standardimplementierung von UI-Plattformen wie `F33f`_`[Cocoa`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Cocoa_(API)]`_`f (`F33f`_`[Apple`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Apple]`_`f), `F33f`_`[Windows Presentation Foundation`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Windows_Presentation_Foundation]`_`f (WPF, `F33f`_`[Microsoft`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Microsoft]`_`f) und `F33f`_`[JavaFX`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=JavaFX]`_`f (`F33f`_`[Oracle`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Oracle]`_`f). Im Webbrowser wird das Muster durch bestimmte `F33f`_`[JavaScript`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=JavaScript]`_`f-`F33f`_`[Frameworks`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Framework]`_`f wie `F33f`_`[React`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=React]`_`f oder `F33f`_`[Knockout.js`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Knockout.js]`_`f verfügbar, welche den Zustand einer `F33f`_`[HTML5`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=HTML5]`_`f-Benutzeroberfläche verwalten können. Die Unterteilung der Benutzeroberfläche in `F33f`_`[Komponenten`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Komponentenbasierte_Entwicklung]`_`f, die aufeinander aufbauen und schlussendlich als View die gesamte Applikationsoberfläche darstellen, wird `*`F33f`_`[Compositing`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Kompositum_(Entwurfsmuster)]`_`f`* genannt und ist typisch für MVVM-Anwendungen.

Das MVVM-Entwurfsmuster erfordert neben dem Kompositum-Entwurfsmuster auch das `F33f`_`[Beobachter`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Beobachter_(Entwurfsmuster)]`_`f-Entwurfsmuster, da das `*ViewModel`* den Zustand der UI abbildet, der sich wiederum durch Eingabe- und andere Ereignisse ändert. Die unmittelbare Reaktion der UI auf Änderungen im `*ViewModel`* und umgekehrt realisiert die `F33f`_`[Echtzeit`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Echtzeit]`_`f-Datenbindung des Musters.

MVVM erlaubte bei seiner Einführung die heute gebräuchliche Rollentrennung von UI-Designern im Frontend und Entwicklern im Backend, wodurch `F33f`_`[Anwendungsschichten`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Schichtenarchitektur]`_`f von verschiedenen Arbeitsgruppen entwickelt werden konnten. Im Desktop-Umfeld eingeführt, findet sich das MVVM-Entwurfsmuster heute in den meisten webbasierten Clients.

>>Contents

• `F0af`_`[Geschichte`#geschichte]`_`f

• `F0af`_`[Beschreibung`#beschreibung]`_`f

• `F0af`_`[.NET und JavaFX`#net-und-javafx]`_`f

• `F0af`_`[JavaScript/HTML`#javascript-html]`_`f

• `F0af`_`[Android`#android]`_`f

• `F0af`_`[Vor- und Nachteile`#vor-und-nachteile]`_`f

• `F0af`_`[Vorteile`#vorteile]`_`f

• `F0af`_`[Nachteile`#nachteile]`_`f

• `F0af`_`[MVVM-Frameworks`#mvvm-frameworks]`_`f

• `F0af`_`[Siehe auch`#siehe-auch]`_`f

• `F0af`_`[Literatur`#literatur]`_`f

• `F0af`_`[Weblinks`#weblinks]`_`f

• `F0af`_`[Einzelnachweise`#einzelnachweise]`_`f

-─

>>Geschichte

Das MVVM wurde 2005 von `F33f`_`[Microsoft MVP`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Microsoft_MVP]`_`f John Gossman veröffentlicht. Es ist eine Spezialisierung des `*Presentation Model`* von `F33f`_`[Martin Fowler`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Martin_Fowler]`_`f`:cite-ref-1[`F5bf`_`[1`#cite-note-1]`_`f] und ist mit diesem insofern identisch, als beide Muster Zustand und Verhalten der View in ein separates UI-Model (Presentation bzw. View Model) verschieben. Das `*Presentation Model`* ermöglicht allerdings das Erzeugen einer View unabhängig von der UI-Plattform, wohingegen das MVVM ursprünglich auf UIs mittels WPF abzielt. Es findet allerdings inzwischen auch in anderen Bereichen Anwendung, ähnlich wie bei MVC.

>>Beschreibung

Das MVVM nutzt die funktionale Trennung des `F33f`_`[MVC-Musters`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Model_View_Controller]`_`f von Model und View. Zum Erreichen einer `F33f`_`[losen Kopplung`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Lose_Kopplung]`_`f zwischen diesen Komponenten wird ein Datenbindungsmechanismus verwendet. Das MVVM-Muster enthält folgende drei Komponenten:

• `*Model:`* `F33f`_`[Datenzugriffsschicht`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Schichtenarchitektur]`_`f für die Inhalte, die dem Benutzer angezeigt und von ihm manipuliert werden. Dazu benachrichtigt es über Datenänderungen und führt eine `F33f`_`[Validierung`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Datenvalidierung]`_`f der vom Benutzer übergebenen Daten durch. Es enthält die gesamte `F33f`_`[Geschäftslogik`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Geschäftslogik]`_`f und ist für sich alleine durch `F33f`_`[Unit Tests`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Modultest]`_`f überprüfbar.

• `*View:`* Alle durch die `*grafische Benutzeroberfläche`* (`F33f`_`[GUI`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Grafische_Benutzeroberfläche]`_`f) angezeigten Elemente. Es bindet sich an Eigenschaften des ViewModels, um Inhalte darzustellen und zu manipulieren sowie Benutzereingaben weiterzuleiten. Durch die Datenbindung ist die View einfach austauschbar und ihr `F33f`_`[Code-Behind`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=ASP.NET]`_`f gering.

• `*ViewModel:`* Enthält die UI-Logik (Model der View) und dient als Bindeglied zwischen View und obigem Model. Einerseits tauscht es Information mit dem Model aus, ruft also `F33f`_`[Methoden`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Methode_(Programmierung)]`_`f oder `F33f`_`[Dienste`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Dienst_(Informatik)]`_`f auf. Andererseits stellt es der View öffentliche `F33f`_`[Eigenschaften`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Sprachelemente_von_C-Sharp]`_`f und `F33f`_`[Befehle`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Kommando_(Entwurfsmuster)]`_`f zur Verfügung. Diese werden von der View an `F33f`_`[Steuerelemente`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Steuerelement]`_`f gebunden, um Inhalte auszugeben bzw. UI-Ereignisse weiterzuleiten. Das ViewModel darf dabei keinerlei Kenntnis der View besitzen.

Das MVVM-Muster kann als technologie-spezifisch bezeichnet werden, da für die Verknüpfung von View und ViewModel ein Datenbindungsmechanismus benötigt wird. Diese Infrastruktur wird häufig als `*Binder`* bezeichnet.`:cite-ref-2[`F5bf`_`[2`#cite-note-2]`_`f] Im Detail handelt es sich hierbei um einen bidirektionalen Einsatz des `F33f`_`[Beobachter-Musters`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Beobachter_(Entwurfsmuster)]`_`f. `*Binder`*, welche eine Datenbindung auf Basis von deklarativen Angaben etablieren können, sind für verschiedene Techniken vorhanden.

>>>.NET und JavaFX

In Bezug auf `F33f`_`[WPF`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Windows_Presentation_Foundation]`_`f und `F33f`_`[Silverlight`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Silverlight]`_`f bedeutet MVVM, dass die View aus rein deklarativem `F33f`_`[XAML`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=XAML]`_`f-Markup besteht. Sie kann von UI-Designern etwa mittels `F33f`_`[Expression Blend`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Microsoft_Expression_Blend]`_`f entworfen werden, wobei lediglich Datenbindungen zum ViewModel erzeugt werden müssen, aber kein Code-Behind. Die Logik wird in einer Programmiersprache wie `F33f`_`[C#`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=C-Sharp]`_`f oder `F33f`_`[VB.NET`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Visual_Basic_.NET]`_`f implementiert. Die Abhängigkeiten zwischen Markup und Code werden minimiert. Gleiches gilt für JavaFX. Hier kann die View mittels FXML und beispielsweise SceneBuilder entwickelt und dann im ViewModel per Property Binding uni- oder bidirektional mit der Geschäftslogik verbunden werden.

>>>JavaScript/HTML

Das MVVM-Muster bzw. der hierzu benötigte Datenbindungsmechanismus wurden im Jahr 2010 von dem Microsoft-Entwickler `*Steve Sanderson`* nach `F33f`_`[JavaScript`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=JavaScript]`_`f portiert. Die entstandene JavaScript-Bibliothek trägt den Namen `F33f`_`[Knockout.js`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Knockout.js]`_`f. Mittlerweile findet das MVVM-Muster ebenfalls Einsatz in anderen JavaScript-Frameworks, wie z. B. `F33f`_`[Angular`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Angular]`_`f, `F33f`_`[Vue.js`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Vue.js]`_`f oder `F33f`_`[React`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=React]`_`f. Durch die Verwendung des MVVM-Muster bei client-lastigen `F33f`_`[Webanwendungen`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Webanwendung]`_`f wird der Implementierungsaufwand reduziert, da sonst übliche manuelle `F33f`_`[DOM`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Document_Object_Model]`_`f-Zugriffe durch die Datenbindung stark reduziert werden können. Die Beschreibung der Datenbindung erfolgt ebenfalls deklarativ, wie bei `F33f`_`[XAML`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Extensible_Application_Markup_Language]`_`f-basierten Microsoft-Produkten.

>>>Android

Das MVVM-Muster und die Datenbindung kann ebenfalls bei der Implementierung mobiler `F33f`_`[Android`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Android_(Betriebssystem)]`_`f-Anwendungen verwendet werden.`:cite-ref-3[`F5bf`_`[3`#cite-note-3]`_`f]

>>Vor- und Nachteile

>>>Vorteile

• Die `F33f`_`[Geschäftslogik`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Geschäftslogik]`_`f kann unabhängig von der Darstellung bearbeitet werden. MVVM „erbt“ die leichtere Austauschbarkeit der View vom `F33f`_`[MVC`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Model_View_Controller]`_`f-Muster.

• Die Testbarkeit verbessert sich, da die ViewModel die UI-Logiken enthalten und unabhängig von der View instanziiert werden können. Hierdurch sind keine UI-Tests nötig. Stattdessen genügen codebasierte `F33f`_`[Modultests`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Modultest]`_`f des ViewModel.

• Die Menge von `F33f`_`[Glue Code`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Glue_Code]`_`f zwischen Model und View wird durch den Verzicht von Controller-Instanzen gegenüber dem MVC-Muster reduziert.`:cite-ref-4[`F5bf`_`[4`#cite-note-4]`_`f]

• Views können von reinen UI-Designern gestaltet werden, während Entwickler unabhängig davon die Models und ViewModels implementieren.

• Es können unterschiedliche Views erstellt werden, die alle an dasselbe ViewModel gebunden werden, ohne dass dort Änderungen an der Programmierung vorgenommen werden müssen.

>>>Nachteile

• Als Nachteil kann der höhere Rechenaufwand aufgrund des enthaltenen bi-direktionalen `F33f`_`[Beobachters`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Beobachter_(Entwurfsmuster)]`_`f gewertet werden.

• Der generische Datenbindungsmechanismus erspart die Implementierung von verschiedenen Controllern. Allerdings ist dieser Mechanismus zur Umsetzung des MVVM-Muster zwingend erforderlich.

>>MVVM-Frameworks

Es existieren verschiedene Frameworks, welche MVVM umsetzen.

• `F33f`_`[Windows Presentation Foundation`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Windows_Presentation_Foundation]`_`f

• `F33f`_`[Knockout.js`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Knockout.js]`_`f – MVVM in JavaScript

• `F33f`_`[Vue.js`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Vue.js]`_`f

• `F33f`_`[JavaFX`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=JavaFX]`_`f

• `F33f`_`[SwiftUI`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=SwiftUI]`_`f

>>Siehe auch

• `F33f`_`[Model View Controller`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Model_View_Controller]`_`f

• `F33f`_`[Smart UI`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Smart_UI]`_`f

>>Literatur

• Raffaele Garofalo: `*Building Enterprise Applications with Windows Presentation Foundation and the Model View ViewModel Pattern`*, Microsoft Press 2011, ISBN 978-0735650923

>>Weblinks

• Norbert Eder: Model-View-ViewModel Die Serie – Codebeispiel

>>Einzelnachweise

`:cite-note-1`!1.`! `F0af`_`[↑`#cite-ref-1]`_`f `*Presentation Model.`* Abgerufen am 27. März 2025.

`:cite-note-2`!2.`! `F0af`_`[↑`#cite-ref-2]`_`f `*Binder |.`* Abgerufen am 27. März 2025.

`:cite-note-3`!3.`! `F0af`_`[↑`#cite-ref-3]`_`f `*Data Binding Library | App architecture.`* Abgerufen am 27. März 2025.

`:cite-note-4`!4.`! `F0af`_`[↑`#cite-ref-4]`_`f John Gossman: `*Tales from the Smart Client: Advantages and disadvantages of M-V-VM.`* Abgerufen am 28. Mai 2012.

`c`F0af`_`[↑ Back to top`#top]`_`f`a